<#include "/layout/layout.ftl" />
<@body>
<link rel="stylesheet" href="/lib/mergely-3.3.3/css/codemirror.css">
<link rel="stylesheet" href="/lib/mergely-3.3.3/css/mergely.css">
    <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default" >
            <div class="panel-heading">查询条件</div>
            <div class="panel-body" style="padding:2px">
                <form id="formSearch" class="form-horizontal">
                    <div class="" style="margin-top:15px">
                        <div class="" style="margin-top:15px">
                            <label class="control-label col-sm-1" for="interfaceAliasName">用例名称</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="interfaceAliasName">
                            </div>
                            <div class="col-sm-4" style="text-align:left;">
                                <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary btnFont"
                                        onclick="">
                                    查询
                                </button>
                            </div>
                        </div>
                </form>
            </div>
        </div>
        <div id="toolbar">

        </div>
        <table id="dataTable"></table>

    </div>
<div style="margin-top: 30%;position: absolute">
    <div class="modal fade" id="myModal"  role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="height:80%">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">结果对比(预期-实际)</h4>
                </div>
                <div class="modal-body" id="body">

                </div>
            </div
        </div>
    </div>
</div>

<script type="text/javascript" src="/lib/mergely-3.3.3/js/mergely.js"></script>
<script type="text/javascript" src="/lib/mergely-3.3.3/js/codemirror.js"></script>
<script type="text/javascript" src="/lib/mergely-3.3.3/js/searchcursor.js"></script>
<script type="text/javascript" src="/script/dataformat/jsonformat.js"></script>
<style>
    .modal-dialog {
        margin: 80px auto;
        width: 80%;
        height: 900px;
    }
</style>
<script type="text/javascript">
    var data=[];
    $(document).ready(function () {
        <#if buildTestCaseList??>
            <#list buildTestCaseList as buildTestCase>
                var obj ={};
                obj.id =${buildTestCase.id!};
                obj.status='${buildTestCase.status!}';
                obj.testCaseName='${buildTestCase.testCaseName!}';
                obj.param='${buildTestCase.param!}';
                obj.actualResult='${buildTestCase.actualResult!}';
                obj.expectResult='${buildTestCase.expectResult!}';
                data.push(obj);
            </#list>
        </#if>
        createTestCaseTable()
    });
    function scroll() {
        $("#compare").mergely('scrollTo','lhs',1);
        $("#compare").mergely('scrollTo','rhs',1);
    }
    function diff(expectResult,actualResult) {
        $("#body").empty();
        $("#body").append("<div id='compare'></div>");
        var expectJson=$.trim(JSON.stringify(expectResult));
        var actualJson=$.trim(JSON.stringify(actualResult));
        expectJson=formatJson(expectJson);
        actualJson=formatJson(actualJson);

        /**
         * 设置diff结果
         * **/
        $("#compare").mergely({
            cmsettings:{
                readOnly:false,
                lineNumbers:true,
                editor_height:900,
                viewport:true
            },
            lhs:function (setValue) {
                setValue(expectJson);
            },
            rhs:function (setValue) {
                setValue(actualJson)
            }
        });
        setTimeout('scroll()',1500);
        $("#myModal").modal("show");
    }
    function createTestCaseTable() {
        $("#dataTable").bootstrapTable({
            data:data,
            method:"get", //请求方式（*）
            pageNumber: 1, ////初始化加载第一页，默认第一页
            pageSize: 10, //每页的记录行数（*）
            pageList: [5, 10, 20, 50, 100], //可供选择的每页的行数（*）
            pagination: true, //是否显示分页（*）
            sidePagination: "client", //分页方式:client客户端分页,server服务端分页（*）
            cache:false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            clickToSelect:true,
            columns:[
                {
                    field:'testCaseName',
                    title:"用例名称"
                },
                {
                    field:'status',
                    title:"状态",
                    formatter:function (value) {
                        var tag;
                        if(value ==1){
                            tag ="<img src='/images/status/green.gif'>通过";
                        }else {
                            tag ="<img src='/images/status/red.gif'>失败";
                        }
                        return tag;
                    }
                },
                {
                    field:'Button',
                    title:"结果对比",
                    formatter:function (value,row) {
                        var  expectResult =row.expectResult;
                        var  actualResult=row.actualResult;
                        var diff ="diff("+expectResult+","+actualResult+")";
                        var tag="<a onclick='"+diff+"'>对比结果</a>";
                        return tag;
                    }
                },
                {
                    field:'param',
                    title:"参数"
                },
                {
                    field:'expectResult',
                    title:"预期结果"
                },
                {
                    field:'actualResult',
                    title:"实际结果"
                }
            ],
            height:500,
            responseHandler:function (res) {
                return res.data;
            }

        })
    }
</script>
</@body>